<template>
	<el-date-picker v-bind="$attrs" @input="change" :value="dateTime"> </el-date-picker>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
@Component({
  components: {}
})
export default class extends Vue {
  @Prop({ default: () => ({}) }) public form!: any;
  @Prop({ default: () => ['min', 'max'] }) public fields!: string[];
  @Prop({ default: true }) public dataType!: boolean;
  public get dateTime () {
    if (this.dataType) {
      return [this.form[this.fields[0]] || '', this.form[this.fields[1]] || ''];
    } else {
      return [this.form.value?.startTime || '', this.form.value?.endTime || ''];
    }
  }

  public change (val) {
    this.$set(this.form, this.fields[0], (val && val[0]) || '');
    this.$set(this.form, this.fields[1], (val && val[1]) || '');
    this.$emit('change', val);
  }

  @Watch('$attrs.type', { immediate: true })
  public typeChange (val) {
    const val1 = this.form[this.fields[0]];
    const val2 = this.form[this.fields[1]];
    if (val1 && val2) {
      if (val === 'datetimerange' && val1.length === 10) {
        this.form[this.fields[0]] = val1 + ' 00:00:00';
        this.form[this.fields[1]] = val2 + ' 00:00:00';
      } else if (val === 'date' && val1.length > 10) {
        this.form[this.fields[0]] = val1.split(' ')[0];
        this.form[this.fields[1]] = val2.split(' ')[0];
      }
    }
  }
}
</script>
